<template>
  <view class="stock">
    <view class="has-stock">
      <!-- 收益区域 -->
      <view class="profileArea">
        <profile></profile>
      </view>

      <!-- 功能区 -->
      <view class="functionArea">
        <functionArea />
      </view>

      <!-- 持仓表格区 -->
      <view class="stockTableArea">
        <stockTable />
      </view>
    </view>
    <view class="explain-area box">
      <view class="tip"> 说明: </view>
      <view class="tip"> - <text class="needChange bg">紫色背景</text> 表示该转债已不在推荐持有列表内 </view>
      <view class="tip"> - 表格中的'持仓'表示'持仓单价(持仓数量)' </view>
      <view class="tip"> - '一键换仓'操作是指卖出不在双低排名前10的可转债，买入尚未持有的前10的可转债 </view>
    </view>
  </view>
</template>

<script>
import stockTable from './_component/stockTable.vue';
import profile from './_component/profile.vue';
import functionArea from './_component/functionArea.vue';

import { createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('stock');
export default {
  components: {
    stockTable,
    profile,
    functionArea
  },
  methods: {
    ...mapActions(['getProfileDataReq', 'getStockListReq'])
  },
  onShow() {
    this.getProfileDataReq();
    this.getStockListReq();
  },
  onPullDownRefresh() {
    this.getProfileDataReq();
    this.getStockListReq();
  }
};
</script>

<style lang="scss" scoped>
@import url(~@/common/style.css);

.stock {
  width: 690rpx;
  margin: 30rpx auto;
}
.explain-area {
  margin-top: 30rpx;
  .tip {
    margin-top: 15rpx;
    font-size: 30rpx;
    .bg {
      margin-left: 10rpx;
    }
  }
}
</style>
